<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div
        class="box"
        :class="{'is-active':form.scene === '大数据计算'}"
        @click="form.scene = '大数据计算'"
      >
        <div class="title">大数据计算</div>
        <div class="desc">
          以ARM,X86等CPU算力为主，面向政务、智慧城市、数字政府等应用场景
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div
        class="box"
        :class="{'is-active':form.scene === '科学计算'}"
        @click="form.scene = '科学计算'"
      >
        <div class="title">科学计算</div>
        <div class="desc">
          以GPU,DSP等加速器算力为主， 面向第一性原理计算，工程仿真， 有限元分析等应用场景
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div
        class="box"
        :class="{'is-active':form.scene === '智能计算'}"
        @click="form.scene = '智能计算'"
      >
        <div class="title">智能计算</div>
        <div class="desc">
          以GPU,DPU,NPU等智算芯片算力为主，面向人工智能模型训练，机器学习训练，大模型，参数迭代
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    components: {
    },
    data () {
      return {
        form: {
          scene: null
        }

      }
    },
    watch: {
      form: {
        deep: true,
        immediate: true,
        handler: function (newval) {
          this.$emit('input', newval)
        }
      }
    },
    created () {
    },
    methods: {

      validate () {
        return new Promise((resolve, reject) => {
          if (this.form.scene) {
            return resolve(true)
          } else {
            this.$message.warning('请选择场景')
            return reject(true)
          }
        })
      }
    }

  }
</script>

<style lang="scss" scoped>
.box {
  height: 200px;
  background: rgba(211, 210, 253, 0.02);
  border: 1px solid rgba(51, 49, 126, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  .title {
    font-size: 40px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    font-weight: 400;
    color: #33317e;
  }
  .desc {
    width: 300px;
    text-align: center;
    color: #666666;
    line-height: 20px;
  }
  &.is-active {
    background: linear-gradient(270deg, #33317e 0%, #5a58c5 100%);
    box-shadow: 0px 0px 14px 0px rgba(86, 81, 254, 0.7);
    .title,
    .desc {
      color: #ffffff;
    }
  }
}
</style>
